"use strict"
/* 轮播图开始 */
/* 左边的轮播图开始 */
$(function(){
	//先获取节点
	let imgs=$("#main1-center1 img");
	//定义节点下标
	let index=0;
	let clear;
	qiehuan();
	//写一个定时器，让它自动切换
	function qiehuan(){
		clear=setInterval(function(){
			if(index==imgs.length-1){
				index=0;
				//所有图片隐藏
				imgs.css("opacity","0");
				//当前图片显示
				imgs.eq(index).css("opacity","1");
				//改变按钮颜色
				$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
				$(".yuan>li").eq(index).css("backgroundColor","white");
			}else{
				//当下标加一，图片切换下一张
				index++;
				//所有图片隐藏
				imgs.css("opacity","0");
				//当前图片显示
				imgs.eq(index).css("opacity","1");
				//改变按钮颜色
				$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
				$(".yuan>li").eq(index).css("backgroundColor","white");
			}
			
		},3000);
	}
	//鼠标移动到图片上时，暂停
	imgs.mousemove(function(){
		clearInterval(clear);
		console.log("鼠标移动到图片上时，暂停");
	});
	//鼠标移开时，继续
	imgs.mouseout(function(){
		qiehuan();
		console.log("鼠标移开时，继续");
	});
	//左按钮切换
	$(".main1-center1 .icon-icon_on_the_left").click(function(){
		clearInterval(clear);
		console.log("左按钮点击");
		if(index==0){
			index=imgs.length-1;
			//全部图片隐藏
			imgs.css("opacity","0");
			//与当前索引相等的图片显示
			imgs.eq(index).css("opacity","1");
			qiehuan();
		}else{
			//当点击时，向左遍历
			index--;
			//全部图片隐藏
			imgs.css("opacity","0");
			//与当前索引相等的图片显示
			imgs.eq(index).css("opacity","1");
			//改变按钮颜色
			$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
			$(".yuan>li").eq(index).css("backgroundColor","white");
			qiehuan();
		}
	});
	//右按钮切换
	$(".main1-center1 .icon-toRight-fill").click(function(){
		console.log("右按钮点击");
		clearInterval(clear);
		if(index==imgs.length-1){
			index=0;
			//所有图片隐藏
			imgs.css("opacity","0");
			//与当前索引相等的图片显示
			imgs.eq(index).css("opacity","1");
			//改变按钮颜色
			$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
			$(".yuan>li").eq(index).css("backgroundColor","white");
			qiehuan();
		}else{
			//点击时向右遍历
			index++;
			//所有图片隐藏
			imgs.css("opacity","0");
			//与当前索引相等的图片显示
			imgs.eq(index).css("opacity","1");
			//改变按钮颜色
			$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
			$(".yuan>li").eq(index).css("backgroundColor","white");
			qiehuan();
		}
		
	});
	//鼠标移动到相应的按钮上时，就显示对应的图片
	$(".yuan>li").mouseover(function(){
		console.log("鼠标移动到"+($(this).index()+1));
		clearInterval(clear);
		//将当前点击的按钮索引复制给图片索引，显示出相应的图片
		index=$(this).index();
		//所有图片隐藏
		imgs.css("opacity","0");
		//与当前索引相等的图片显示
		imgs.eq(index).css("opacity","1");
		//改变按钮颜色
		$(".yuan>li").css("backgroundColor","rgb(127,133,152)");
		$(".yuan>li").eq(index).css("backgroundColor","white");
		qiehuan();
		
	});
	
});
/* 左边的轮播图结束 */
/* 右边的轮播图开始 */
$(function(){
	//先获取节点
	let you_imgs=$(".main1-center2>ul>li");
	console.log(you_imgs);
	//创建一个索引
	let index=0;
	let clear;
	qiehuan();
	//让其自动切换
	function qiehuan(){
		clear=setInterval(function(){
			if(index==you_imgs.length-1){
				index=0;
				//让所有图片隐藏
				you_imgs.css("opacity","0");
				//让当前索引对应的图片显示
				you_imgs.eq(index).css("opacity","1");
			}else{
				index++;
				//让所有图片隐藏
				you_imgs.css("opacity","0");
				//让当前索引对应的图片显示
				you_imgs.eq(index).css("opacity","1");
			}
			
		},5000);
	}
	//左点击
	$(".main1-center2 .icon-icon_on_the_left").click(function(){
		console.log("左点击");
		clearInterval(clear);
		//点击后，向左遍历
		if(index==0){
			index=you_imgs.length-1;
			//让所有图片隐藏
			you_imgs.css("opacity","0");
			//让当前索引对应的图片显示
			you_imgs.eq(index).css("opacity","1");
			qiehuan();
		}else{
			index--;
			//让所有图片隐藏
			you_imgs.css("opacity","0");
			//让当前索引对应的图片显示
			you_imgs.eq(index).css("opacity","1");
			qiehuan();
		}
	});
	//右点击
	$(".main1-center2 .icon-toRight-fill").click(function(){
		console.log("右点击");
		clearInterval(clear);
		//点击之后，向右遍历
		if(index==you_imgs.length-1){
			index=0;
			//让所有图片隐藏
			you_imgs.css("opacity","0");
			//让当前索引对应的图片显示
			you_imgs.eq(index).css("opacity","1");
			qiehuan();
		}else{
			index++;
			//让所有图片隐藏
			you_imgs.css("opacity","0");
			//让当前索引对应的图片显示
			you_imgs.eq(index).css("opacity","1");
			qiehuan();
		}
		
	});
});

/* 右边的轮播图结束 */
/* 轮播图结束 */
/* 左侧栏鼠标移动到上面显示右侧开始 */
$(function(){
	//先获取左侧栏的数组
	let ul_left=$(".main1-left>ul>li");
	//在获取对应的右侧栏的数组
	let ul_right=$(".main1-left-right>.main1-left-one");
	//给右侧栏一个下标索引
	let index=0;
	//鼠标移动到对应的下标的时候，右边下标相同的就显示出来
	ul_left.mousemove(function(){
		console.log($(this).index());
		//将当前的下标索引赋值给右边的
		index=$(this).index();
		//然后让右边栏对应的盒子显示出来,其它盒子隐藏
		ul_right.css("display","none");
		ul_right.eq(index).css("display","block");
	});
	//鼠标移开之后，右边所有盒子隐藏
	ul_left.mouseout(function(){
		ul_right.css("display","none");
	});
	//鼠标移动到右边之后，不让其隐藏
	ul_right.mouseover(function(){
		ul_right.css("display","none");
		ul_right.eq(index).css("display","block");
	});
	//鼠标从右边移开时候,让其隐藏
	ul_right.mouseout(function(){
		ul_right.css("display","none");
	});
});
/* 左侧栏鼠标移动到上面显示右侧结束 */
/* main2轮播图开始 */
$(function(){
	/* 
		业务逻辑：
		1.首先是html里面的，要符合这样子的结构
		<div class="a">//这里要用定位，这样子才能用left。外层宽度小
			<img3>  //内层宽度大
			<img1>
			<img2>
			<img3>
			<img1>
		</div>
		2.然后是js的，直接看下面吧
		只需要记住一个点，到头之后先闪回来，然后继续移动
	 */
	//先获取所有节点，组成数组
	let main2_arr=$(".main2-center-one-one");
	let main2_arr2=$(".main2-center-one");
	console.log(main2_arr);
	console.log(main2_arr2);
	//定义一个下标索引
	//从第一张图片开始
	let index=1;
	let timer=null;
	//点击左边按钮
	$(".main2-center .icon-icon_on_the_left").click(function(){
		//再写一个定时器让用户别按那么快,节流
		if(timer){//如果有时间
			return;//直接不管了
		}
		timer=setTimeout(()=>{
			console.log("左边");
			--index;
			if(index<0){
				index=(main2_arr.length/4)-2;//3
				console.log("左回归")
				//回归到3，再转2，也就是回归到原来它本身的位置
				main2_arr2.css('left',-index*830);
				index=2;
				console.log("再转2");
				//再左转2，用户是意识不到这个瞬间的时间间隙的
				main2_arr2.animate({'left':-index*830},500);
					
			}else if(index>=((main2_arr.length/4)-2)){//3
				console.log("右最大");
				//点击右边到最大的时候，想要往左边，须知前一个的地址
				index=(main2_arr.length/4)-2;
				main2_arr2.animate({'left':-index*830},500);
			}else{
				console.log("往左");
				//这里是最开始的0
				main2_arr2.animate({'left':-index*830},500);
			}
			timer=null;
		},600);
	
	});

	//点击右边按钮
	$(".main2-center .icon-toRight-fill").click(function(){
		//再写一个定时器让用户别按那么快,节流
		if(timer){//如果有时间
			return;//直接不管了
		}
		timer=setTimeout(()=>{
			console.log("右边");
			//不管是哪种情况，都加1
			index++;
			if(index>((main2_arr.length/4)-1)){//4
				console.log("右回归");
				//到头了，回归原位，先闪回来
				main2_arr2.css('left',-835);
				index=2;
				//然后在那间隙向左移动
				main2_arr2.animate({'left':-index*832},500);
			}else{
				//让盒子往左边移动
				main2_arr2.animate({'left':-index*832},500);
			}	
			timer=null;
		},600);
	});
});
/* main2轮播图结束 */
/* main3开始 */
$(function(){
	let node=$(".main3-left-top-two>span");
	let node2=$(".main3-left-bottom>li");
	let index=0;
	//鼠标移动到对应索引，切换到对应的选项
	//你可以用for循环来遍历数组，也可以通过$(this).index()直接指向当前数组下标
	node.mousemove(function(){
		// console.log("鼠标移动到:"+$(this).index());
		index=$(this).index();
		node.removeClass("main3-left-top-red");
		node.eq(index).addClass("main3-left-top-red");
		//对应的选项卡就显示出来
		node2.removeClass("main3-left-bottom-red");
		node2.eq(index).addClass("main3-left-bottom-red");
	});
	
});
/* main3结束 */
/* main4图片滑动开始 */
$(function(){
	let gundong=$(".main4-right");
	//这里需要获取到的是文本，而不是节点
	//如果获取的是节点，那么后面追加的时候前面的就又消失了，相当于剪切，而不是复制
	let gundong1=$(".main4-right-one");
	let gundong2=$(".main4-right-two");
	//把gundong1中的图片复制一份给gundong2
	//gundong2.html((gundong1.html()));
	gundong2.append((gundong1.html()));
	let clear;
	zuoyi();
	//搞一个定时器，让它自动往左边移动
	function zuoyi(){
		clear=setInterval(function(){
			//向左偏移
			//不知道为什么用gundong.width()/2的时候图片也跟着一起回到原点了
			if(gundong.scrollLeft()>=gundong1.width()){
				gundong.scrollLeft(0);
			}else{
				gundong.scrollLeft(gundong.scrollLeft()+1);
			}	
		},10);
	}
	//当鼠标移动到上面时，停止
	gundong.mouseover(function(){
		clearInterval(clear);
		gundong.css("overflow","auto");
	});
	//当鼠标移开时，继续
	gundong.mouseout(function(){
		gundong.css("overflow","hidden");
		zuoyi();
	});
});
/* main4图片滑动结束 */
/* main5图片自动滑动开始 */
$(function(){
	//定义一个下标，从1开始
	let index=1;
	let num=114;//5.7*2=11.4rem
	let clear;
	zhixing();
	//设置一个定时器，每隔一定时间自动往左边移动
	function zhixing(){
		clear=setInterval(()=>{
			//如果移动到头，那么回到原来的位置
			index++;
			if(index>$(".main5-one-bottom>a").length-2){//4
				// console.log("到头，回归");
				index=0;
				$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
				$(".main5-one-bottom").css("left",(-index*57));
				index++;
				$(".main5-one-bottom").animate({"left":(-index*57)},1000);
				$(".main5-one-bottom>a").removeClass("img-fangda");
				$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
			}else{
				//让父级元素往左边移动
				// console.log("移动");
				// $(".main5-one-bottom").css("left",-(index*95));
				// main2_arr2.animate({'left':-index*830},500);
				$(".main5-one-bottom").animate({"left":-((index-1)*num)-57},2000);
				$(".main5-one-bottom>a").removeClass("img-fangda");
				$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
			}	
		},3000);
	}
	//左点击按钮
	$(".main5-one>.icon-icon_on_the_left").click(()=>{
		console.log("左点击");
		clearInterval(clear);
		//如果移动到头，那么回到最右边的位置
		index--;
		if(index<=0){
			index=$(".main5-one-bottom>a").length-2;//4
			$(".main5-one-bottom").css("left",-((index)*num)-57);

			$(".main5-one-bottom").animate({"left":-((index-1)*num)-57},1000);
			$(".main5-one-bottom>a").removeClass("img-fangda");
			$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
		}else{
			//让父级元素往左边移动
			$(".main5-one-bottom").animate({"left":-((index-1)*num)-57},1000);
			$(".main5-one-bottom>a").removeClass("img-fangda");
			$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
		}
		zhixing();
	});
	//右点击按钮
	$(".main5-one>.icon-toRight-fill").click(()=>{
		console.log("右点击");
		clearInterval(clear);
		//如果移动到头，那么回到原来的位置
		index++;
		if(index>$(".main5-one-bottom>a").length-2){//4
			index=0;
			$(".main5-one-bottom").css("left",(-index*57));
			index++;
			$(".main5-one-bottom").animate({"left":(-index*57)},1000);
			$(".main5-one-bottom>a").removeClass("img-fangda");
			$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
		}else{
			//让父级元素往左边移动
			$(".main5-one-bottom").animate({"left":-((index-1)*num)-57},1000);
			$(".main5-one-bottom>a").removeClass("img-fangda");
			$(".main5-one-bottom>a").eq(index).addClass("img-fangda");
		}
		zhixing();
	});
	
});
/* main5图片自动滑动结束 */
/* 侧边固定栏开始 */ 
$(function(){
	//BOM的滚动事件触发
	$(window).scroll( function(){
		//当滚动条向下滑动一定距离时
		if($("html").scrollTop()>=650){
			console.log("固定");
			//变为固定定位
			$(".chebianlan").css({"position":"fixed","top":0});
			$(".chebianlan>li:first-child").css({"color":"red"});
			$(".chebianlan>li:first-child").hover(function(){
				$(this).css({"color":"white","backgroundColor":"red"});
			},function(){
				$(this).css({"color":"black","backgroundColor":"white"});
			});
			$(".chebianlan>li:last-child").css({"display":"block","color":"red"});
			$(".chebianlan>li:last-child").hover(function(){
				$(this).css({"color":"white","backgroundColor":"red"});
			},function(){
				$(this).css({"color":"black","backgroundColor":"white"});
			});
		}else{
			console.log("相对");
			//变回原来的定位
			$(".chebianlan").css({"position":"absolute","top":653});
			$(".chebianlan>li:first-child").css({"color":""});
			$(".chebianlan>li:last-child").css({"display":"none"});
		}
		//当点击返回顶部时
		$(".chebianlan>li:last-child").click(function(){
			console.log("返回顶部");	
			//返回到顶部的时候就停止动画
			$("body,html").stop().animate({scrollTop:0},500);
			// $("html").scrollTop(0);
		});
	});

});
/* 侧边固定栏结束 */